// https://reactcommunity.org/react-transition-group/css-transition
import {CSSTransition, SwitchTransition, TransitionGroup} from 'react-transition-group';
import {useState} from "react";
import "./index.scss"


function Example3() {
  const [items, setItems] = useState([
    {id: Date.now() + 1, text: 'Buy eggs'},
    {id: Date.now() + 2, text: 'Pay bills'},
    {id: Date.now() + 3, text: 'Invite friends over'},
    {id: Date.now() + 4, text: 'Fix the TV'},
  ]);
  return (
    <div style={{marginTop: '2rem'}} className="example3">
      <ul style={{marginBottom: '1rem'}}>
        <TransitionGroup className="todo-list">
          {items.map(({id, text}) => (
            <CSSTransition
              key={id}
              timeout={500}
              classNames="item"
            >
              <li>
                <button
                  className="remove-btn"
                  onClick={() =>
                    setItems(items =>
                      items.filter(item => item.id !== id)
                    )
                  }
                >
                  &times;
                </button>
                {text}
              </li>
            </CSSTransition>
          ))}
        </TransitionGroup>
      </ul>
      <button
        onClick={() => {
          const text = prompt('Enter some text');
          if (text) {
            setItems(items => [
              ...items,
              {id: Date.now(), text},
            ]);
          }
        }}
      >
        Add Item
      </button>
    </div>
  );
}


const modes = ["out-in", "in-out"];

function Example2() {
  const [mode, setMode] = useState("out-in");
  const [state, setState] = useState(true);
  return (
    <div className="example2">
      <div className="label">Mode 22:</div>
      <div className="modes">
        {modes.map(m => (
          <div key={m}>
            <label htmlFor="mode">{m}</label>
            <input type="checkbox"
                   name="mode"
                   checked={mode === m}
                   value={m}
                   onChange={event => {
                     setMode(event.target.value);
                   }}
            />
          </div>
        ))}
      </div>
      <div className="main">
        <SwitchTransition mode={mode}>
          <CSSTransition
            key={state}
            addEndListener={(node, done) => {
              node.addEventListener("transitionend", done, false);
            }}
            classNames="fade"
          >
            <div className="button-container">
              <button onClick={() => setState(state => !state)} className="btn">
                {state ? "Hello, world!" : "Goodbye, world!"}
              </button>
            </div>
          </CSSTransition>
        </SwitchTransition>
      </div>
    </div>
  );
}

function Example1() {
  const [showButton, setShowButton] = useState(true);
  const [showMessage, setShowMessage] = useState(false);
  return (
    <div style={{paddingTop: '2rem'}}>
      {showButton && (
        <button onClick={() => setShowMessage(true)}>
          Show Message
        </button>
      )}
      <CSSTransition
        in={showMessage}
        timeout={300}
        classNames="example1"
        unmountOnExit
        onEnter={() => setShowButton(false)}
        onExited={() => setShowButton(true)}
      >
        <div onClose={() => setShowMessage(false)}>
          <h3>
            Animated alert message
          </h3>
          <p>
            This alert message is being transitioned in and
            out of the DOM.
          </p>
          <button onClick={() => setShowMessage(false)}>
            Close
          </button>
        </div>
      </CSSTransition>
    </div>
  );
}


export default () => {
  return (
    <div>
      <Example1/>
      <Example2/>
      <Example3/>
    </div>
  )
}
